import { reactive, shallowRef } from 'vue';
import { uuid } from '@/utils/utils';
import { multipleEnum, textModeEnum, valueModeEnum } from '@/types/mode-enum';
import { projectModeType } from '@/types/mode-type';
import TextProp from "../views/config/props-item/TextProp.vue";
import OptionProp from "../views/config/props-item/OptionProp.vue";

export const projectMode = reactive<projectModeType>({
    viewMode: true,
    editMode: true,
    theme: "dark"
})


/**
 * todo:全局默认值
 *  */
export let defaultValue = reactive({
    /* 每个选项的分数 */
    defaultScore: 5,
    /* 默认值的类型 */
    defaultValueType: valueModeEnum.string,
    /* 默认文本类型 */
    defaultTextType: textModeEnum.string,
    /* 默认候选值类型 */
    defaultMultipleType: multipleEnum.dropdown
})
/* 属性配置 */
export let propConfig = function () {
    return {
        id: uuid(),
        /* 标题 */
        title: "",
        /* 文件类型 ：props|file|folder*/
        type: "props",
        /* 用户输入的值 */

        value: "",
        /* 系统上的默认值 */
        defaultValue: "",
        /* 描述信息 */
        desc: "",
        /* key */
        key: Symbol(),
        /* 子节点 */
        children: [],
        /* 是否可编辑标题 */
        editable: true,
        /* 属性的类型 ：string,multiple,boolean,star*/
        valueType: defaultValue.defaultValueType,
        expand: false,
        /* 是否能编辑内容 */
        canEdit: true,
        /* 正确的值，用于检测输入的值是否正确 */
        correctValue: "",
        /* 必填项 */
        require: "",
        /* 设置这个选项的分数 */
        score: defaultValue.defaultScore,
        /* 排序 */
        sort: 0,
        /* 校验规则 */
        config: {
            text: {
                type: defaultValue.defaultTextType,/* 颜色，日期，时间 */
                min: 0,
                max: 10
            },
            /* 多选 */
            multiple: {
                list: [],
                /* 候选值的形式：下拉，单选,dropdown,ratio */
                type: defaultValue.defaultMultipleType
            },
            boolean: false,
            /* 图片模式 */
            image: {
                /* 真实的图片 */
                list: [],
                /* 缓存的图片 */
                cacheList: [],
                /* 预选图片 */
                preList: []
            }
        }
    }
}



/* 文件实质是个表单 */
export let fileConfig = function () {
    return {
        id: uuid(),
        title: "",
        value: "",
        type: "file",
        children: [],
        editable: true,
        key: Symbol(),
        expand: false,
        /* 表头列表 */
        headers: [
            // {
            //     id: "123",
            //     key: "1",
            // }
        ],
        /* 值列表 */
        values: [
            // ["张飞", "男", 18],
            // {
            //     /* 列名 */
            //     column: "列名",
            //     data: [
            //         {
            //             id: "key",
            //             key: "key",
            //             value: "value",
            //         }
            //     ]
            // }
        ]
    }
}
/* 文件夹，是个容器 */
export let folderConfig = function () {
    return {
        id: uuid(),
        title: "",
        type: "folder",
        children: [],
        editable: true,
        expand: false,
        key: Symbol()
    }
}

export let valueTypeOptions = [
    {
        value: "string",
        label: "文本",
        component: shallowRef(TextProp)
    },
    {
        value: "multiple",
        label: "下拉选项",
        component: shallowRef(OptionProp)
    },
    {
        value: "boolean",
        label: "布尔类型",
        component: shallowRef(null)
    },
    {
        value: "star",
        label: "评分",
        component: shallowRef(null)
    },
    {
        value: "image",
        label: "图片",
        component: shallowRef(null)
    },
]


export let textTypeList = [
    {
        label: "文本",
        value: textModeEnum.string
    },
    {
        label: "密码",
        value: textModeEnum.password
    },
    {
        label: "颜色",
        value: textModeEnum.color
    },
    {
        label: "时间",
        value: textModeEnum.time
    },
    {
        label: "日期",
        value: textModeEnum.date
    },
    {
        label: "文本域",
        value: textModeEnum.textarea
    },
    {
        label: "数字",
        value: textModeEnum.number
    },
]